<script setup>
import Avatar from '@/components/Avatar.vue'
import {useRoute, useRouter} from 'vue-router'
import {ref} from "vue"
import {articleAPI} from "@/apis/index.js"
import {ElMessage} from "element-plus"

const noImage = ref('https://campus-nexus.oss-cn-guangzhou.aliyuncs.com/articles/default/default.png')

const router = useRouter()

const props = defineProps({
  data: {
    type: Object,
  },
});

// 点击评论按钮跳转到文章页面并滚动到评论区
const goToComment = () => {
  router.push({
    path: `/post/${props.data.articleId}`,
    hash: '#view-comment'
  })
}

const route = useRoute()

// 点赞功能
const doLike = async () => {
  const data = {
    articleId: props.data.articleId
  }
  try {
    const response = await articleAPI.likeArticle(data)
    if (response.status === 'success') {
      // 更新点赞状态
      props.data.haveLike = response.data.isLiked

      if (response.data.isLiked) {
        ElMessage.success('Do like successful')
        props.data.goodCount += 1
      }

      if(!response.data.isLiked) {
        ElMessage.success('Unsubscribed like successfully')
        props.data.goodCount -= 1
      }
    }
  } catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div class="article-item">
    <!-- 左侧图片区域 -->
    <div class="image-section">
      <el-image
          fit="cover"
          loading="lazy"
          :src="(data.cover !== null) ? data.cover : noImage"
          class="article-image"
      >
      </el-image>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content-section">
      <!-- 上方标题 -->
      <router-link :to="`/post/${data.articleId}`" class="title-section">
        <!--        Notice-->
        <div class="title-line">
          <span class="tag" v-if="data.topType == 1 && route.path != '/board/1'">
            Notice
          </span>
          <span class="tag" v-else-if="data.topType == 1 && route.path == '/board/1'">
            {{ data.institution }}
          </span>
          <span class="article-title">{{ data.title }}</span>
        </div>
        <div class="article-summary">{{ data.content }}</div>
      </router-link>

      <!-- 下方信息区域 -->
      <div class="info-section">
        <!-- 左下角用户信息 -->
        <div class="user-info">
          <router-link :to="'/user/' + data.userId" class="link-info">
            <Avatar :src="data.avatar" :width="30"></Avatar>
            <span class="nick-name">{{ data.nickName }}</span>
          </router-link>
          <span class="institution" v-if="data.institution">
            <el-icon><OfficeBuilding/></el-icon>
            {{ data.institution }}
          </span>
          <el-divider direction="vertical"></el-divider>
          <div class="post-time">{{ data.postTime }}</div>
          <el-divider direction="vertical"></el-divider>
          <router-link :to="`/board/${data.pBoardId}`" class="link-info board-link">
            {{ data.pBoardName }}
          </router-link>
          <span> - </span>
          <router-link :to="`/board/${data.pBoardId}/${data.boardId}`" class="link-info board-link">
            {{ data.boardName }}
          </router-link>
        </div>

        <!-- 右下角互动按钮 -->
        <div class="action-buttons">
          <div :class="['icon-good', data.haveLike ? 'active' : '']" @click="doLike">
            <el-icon>
              <Star/>
            </el-icon>
            <span>{{ data.goodCount == 0 ? "Like" : data.goodCount }}</span>
          </div>
          <div class="icon-comment" @click="goToComment">
            <el-icon>
              <ChatDotRound/>
            </el-icon>
            <span>{{ data.commentCount == 0 ? "Comment" : data.commentCount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  gap: 15px;
  align-items: flex-start;

  &:hover {
    background-color: #f8f9fa;
  }

  .image-section {
    flex-shrink: 0;

    .article-image {
      width: 180px;
      height: 120px;
      border-radius: 8px;
      object-fit: cover;
    }
  }

  .content-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;

    .title-section {
      text-decoration: none;
      display: flex;
      flex-direction: column;

      .title-line {
        display: flex;
        align-items: center;
        gap: 6px;

        .tag {
          color: #F56C6C;
          border: 1px solid #F56C6C;
          font-size: 16px;
          border-radius: 3px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .article-title {
          display: inline-block;
          font-size: 24px;
          font-weight: 500;
          color: #333;
          line-height: 1.4;
          cursor: pointer;
          max-width: 760px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      .article-summary {
        font-size: 16px;
        max-width: 500px;
        color: #666;
        line-height: 1.5;
        margin-top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 15px;
      }
    }

    .info-section {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: auto;

      .user-info {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 13px;
        color: #666;

        .link-info {
          display: flex;
          align-items: center;
          gap: 5px;
          text-decoration: none;
          color: #666;
          margin-right: 3px;

          &:hover {
            color: var(--el-color-primary);
          }

          .nick-name {
            font-weight: 500;
          }
        }

        .institution {
          background-color: var(--el-color-primary);
          color: #fff;
          font-size: 10px;
          border-radius: 3px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 1px 3px;
        }

        .board-link {
          color: var(--el-color-primary);
          font-weight: 500;
        }

        .post-time {
          color: #999;
        }

        .el-divider {
          margin: 0 5px;
          height: 12px;
        }
      }

      .action-buttons {
        display: flex;
        gap: 15px;
        margin-right: 60px;

        .icon-good,
        .icon-comment {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 20px;
          color: #666;
          cursor: pointer;

          &:hover {
            color: var(--el-color-primary);
          }

          .el-icon {
            font-size: 18px;
          }
        }

        .active {
          color: var(--el-color-primary);
        }
      }
    }
  }
}


</style>